html

<canvas baseChart width="800" height="800"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[colors]="barChartColors"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>

ts

  // 圖表數值資料
  public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: '標槍' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: '射箭' }
  ];

  // 圖表項目
  barChartOptions: ChartOptions = {
    title: {
      fontSize: 18,
      display: true,
      text: '運動比賽',
    },
    responsive: true,
    scales: {
      yAxes: [{
        // offset: true, // 是否 移除 X軸 的 底線
        ticks: {
          beginAtZero: true // 是否 從 0 開始分層
        },
        scaleLabel: {
          display: true,
          labelString: '人數'
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: '成績(分)'
        }
      }]
    },
    animation: {
      duration: 1000 // 動畫移動速度
    }
  };
  // 各個區塊的顏色
  barChartColors: Color[] = [
    {
      borderWidth: .5, // 有外框寬度才能顯示外框
      borderColor: '#000', // 提示標籤的顏色提示外框顏色
      backgroundColor: '#15bf41', // 圖表個別區塊顏色
    },
    {
      borderWidth: .5, // 有外框寬度才能顯示外框
      borderColor: '#000', // 提示標籤的顏色提示外框顏色
      backgroundColor: '#106bc5', // 圖表個別區塊顏色
    },
  ];
  barChartLabels: Label[] = ['0-20', '20-40', '40-60', '60-80', '80-100']; // X軸標籤
  barChartType: ChartType = 'bar'; // 圖表類型
  barChartLegend = true; // 是否開啟 顏色標籤對照表
  barChartPlugins = []; // 外掛套件